<template>
    <div class="personCollection">
      <div class="block" v-if="total">
      <personDetails 
      v-on:SearchPersonRelics="SearchPersonRelicList"
       v-if="isGetData"
      :currentPageData="currentPageData"
      ></personDetails>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div v-else class="empty">
      暂无收藏文物信息
    </div>
    </div>
  </template>
  
  <script>
  import personDetails from '@/components/personDetails.vue'
  export default {
    components:{
        personDetails,
    },
      props:{
         allDate:{ 
          type: Array,//所有数据
          default(){}
         },
         pageSize:{}, //每页显示条数
         total:{},//总条数
      },
      watch:{
        allDate(newVal, oldVal){
      // newVal是新值，oldVal是旧值
          this.allDate = newVal
          this.init();
        }
      },
      data(){
          return {
              isGetData:false, //判断是否currentPageData被成功赋值
              currentPageData: [], // 当前页显示的数据
              currentPage: 1,// 当前显示的页码，默认为第一页
          }
      },
      mounted(){
        this.init();
      },
      methods:{
        init(){
            this.currentPageData=this.allDate.slice(0,1*this.pageSize)  
            this.isGetData=true
            console.log(`当前页数据`,this.currentPageData);
        },
        SearchPersonRelicList(relicList){
          this.allDate=relicList
          this.total=relicList.length;
        },
        handleCurrentChange(val) {
          this.currentPageData=this.allDate.slice((val-1)*this.pageSize,val*this.pageSize);//把每页的数据传给子组件
          console.log(`当前页: ${val}`);
          console.log(`当前页数据`,this.currentPageData);
          console.log("所有数据",this.allDate)
        }
      }
  }
  </script>
  
  <style scoped>
  .personCollection{
    background-color:#e5e2e2;
    text-align: center;
    height: auto;
  }
  .empty{
  height: 700px;
  text-align: center;
  line-height: 700px;
  color:rgb(30, 57, 54);
  font-size:20px;
  }
  .el-pagination{
    margin-bottom: 0px;
}
  </style>